<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 面向对象 
    // 大量的分工，精密的协作
    // 将需求抽象成一个对象  分析其特征(属性)与行为(方法)
    // 三大特征：   封装    继承    多态    (抽象) 

    // 面向过程
    // 分析问题所需要的步骤     用变量函数将这些步骤实现    使用的时候进行调用

    // 如果把大象放进冰箱，利用面向过程和面向对象。
    // 面向过程
    // 1. 准备好大象  冰箱
    // 2. 打开冰箱
    // 3. 把大象放进冰箱
    // 4. 关上冰箱

    // 面向对象
    // 冰箱{
    //    targer:elephant, // 指向：大象
    //     open(){},       // 打开
    //     put(){},        // 放
    //     close(){}       // 关上
    // }


    // 案例     描述一只猫的名称、颜色、叫声、技能。

    // 面向过程
    var name = "Tom";
    var color = "white";
    var species = "猫";
    function call() {
        console.log("喵喵");
    }
    function skill() {
        console.log("捉老鼠");
    }
    // 面向对象 
    // 把面向过程的变量 改为对象的属性
    // 把面向过程的函数  改为对象的方法

    // 字面量对象   (对象数据  对一个或一类事物特征(属性)和行为的描述)
    var cat = {
        name: "Kitty",
        color: "white",
        species: "猫",
        call() {
            console.log("喵喵");
        },
        skill() {
            console.log("捉老鼠");
        },
    }

    // 工厂模式 批量创建对象(封装函数      =>  提取参数，返回对象)
    // 优点：快速得到需要的对象
    // 缺点：
    // 1. 创建的对象和函数没有关联性
    // 解决办法：创建一个自定义函数 new Fn()
    // 2. 公用的属性和方法重复声明  需要占据多余内存
    //  解决办法：把所有实例化对象 公有属性和方法提取出来 放到一个公共的位置(原型对象) => 允许所有的实例化对象
    function cat(name, color) {
        var obj = {
            name,
            color,
            species: "猫",
            call() {
                console.log("喵喵");
            },
            kill() {
                console.log("捉老鼠");
            },
        }
        return obj;
    }
    var Kitty = cat("Kitty", "black");
    console.log(Kitty);
    // 对象和函数没有关联性  主要针对构造函数
    var arr = new Object();
    console.log(arr instanceof Object);
    console.log(Kitty instanceof cat);



</script>

</html>